<!DOCTYPE HTML>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/style.css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>[[${title}]]</title>
    <style type="text/css">
        body{
            height: 3rem;
        }
    </style>
</head>
<body>
<table class="table table-border table-bordered table-bg">
    <thead>
    <tr>
        <th colspan="7" scope="col">实时信息</th>
    </tr>
    <tr class="text-c">
        <th>车牌号</th>
        <th>时速</th>
        <th>里程</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/lib/layer/2.5.6/layui.js"></script>
<script type="text/javascript" src="/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
    $(function () {
        getDatas();
        setInterval('getDatas()',3000);//轮询执行，3s一次
    });

    function getDatas(){
        var table = $('table tbody');
        $.ajax({
            url:'/cars/position/getDatas',
            type:'post',
            async:false,
            dataType:'json',
            success:function (res) {
                $.each(res,function (index,value) {
                    table.append('<tr><td>' + value.cardId + '</td><td>' + value.speed + '</td><td>' + value.miles + '</td></tr>');
                })
            },
            error:function (res) {
                console.log(res);
            }
        })
    }
</script>
</body>
</html>
